<template>
  <div class="my-container">
    <div class="header-container">
      <div class="header-top-no-login" v-if="!loginFlag">
        <van-button round class="login-btn" to="login">立即登录</van-button>
        <div class="message-info">
          <img src="../../assets/img/message_icon.png" alt="">
        </div>
      </div>

      <div class="header-top" v-if="loginFlag">
        <div class="user-img" @click="jumpView('personalInfo')">
          <img :src="headPic || require('@/assets/img/head_img.png')" alt="">
        </div>
        <div class="user-info" @click="jumpView('personalInfo')">
          <div class="user-info-name" v-if="nickName">
            <span>{{nickName}}</span>
            <van-icon name="arrow" class="arrow-right" />
          </div>
          <div class="user-phone">{{phone || ''}}</div>
        </div>
        <div class="message-info" @click="jumpView('message')">
          <img src="../../assets/img/message_icon.png" alt="">
          <span class="message-tag" v-if="msgNum > 0">{{msgNum}}</span>
        </div>
      </div>
      
      <div class="header-bottom">
        <div class="header-bottom-left" @click="jumpBalance">
          <div class="user-account">
            <p>{{accountMoney || '0.00'}}</p>
            <p class="color-gray">账户余额（元）</p>
          </div>
          <van-icon name="arrow" class="arrow-right" />
        </div>
        <van-button round class="withdraw-btn" @click="withdrawFn">提现</van-button>
      </div>
    </div>

    <ul class="center-container">
      <li @click="jumpView('purchaseOrder')">
        <img src="../../assets/img/my_sales_icon.png" alt="">
        <p>采购订单</p>
      </li>
      <li @click="jumpView('resale')">
        <img src="../../assets/img/my_change_icon.png" alt="">
        <p>货品转售</p>
      </li>
      <!-- <li> -->
      <li @click="jumpView('supplyOrder')">
        <img src="../../assets/img/my_support_icon.png" alt="">
        <p>供货记录</p>
      </li>
      <!-- <li> -->
      <li @click="jumpView('buyOrder')">
        <img src="../../assets/img/my_purchase_icon.png" alt="">
        <p>求购记录</p>
      </li>
      <li @click="jumpView('agaricOrder')">
        <img src="../../assets/img/my_muer_icon.png" alt="">
        <p>木耳订单</p>
      </li>
    </ul>
    
    <ul class="bottom-container">
      <li class="bottom-list" @click="jumpView('bill')">
        <div class="bottom-list-left">
          <img src="../../assets/img/my_bill_icon.png" alt="">
          <span>账单明细</span>
        </div>
        <van-icon name="arrow" class="arrow-right" />
      </li>
      <li class="bottom-list" @click="jumpView('contract')">
        <div class="bottom-list-left">
          <img src="../../assets/img/my_contract_icon.png" alt="">
          <span>我的合同</span>
        </div>
        <van-icon name="arrow" class="arrow-right" />
      </li>
      <li class="bottom-list" @click="jumpView('help')">
        <div class="bottom-list-left">
          <img src="../../assets/img/my_advice_icon.png" alt="">
          <span>帮助中心</span>
        </div>
        <van-icon name="arrow" class="arrow-right" />
      </li>
      <li class="bottom-list" @click="jumpView('accountSet')">
        <div class="bottom-list-left">
          <img src="../../assets/img/my_set_icon.png" alt="">
          <span>账号设置</span>
        </div>
        <van-icon name="arrow" class="arrow-right" />
      </li>
    </ul>

    <div class="empty-bottom-div"></div>

    <router-view/>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import Storage from "@/utils/storage";
export default {
  components:{
    [Dialog.name]:Dialog
  },
  data() {
    return {
      loginFlag: false, //登录状态
      phone: '',
      nickName: '',
      userName: '',
      headPic: '',
      msgNum: 0,
      accountMoney: '0.00',
      bankCard: '',
    }
  },
  created() {
    // Storage.set('token', 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJBUFAiLCJpc3MiOiJTZXJ2aWNlIiwiZXhwIjoxNTc0NTgzNjcxLCJ1c2VySWQiOiI1IiwiaWF0IjoxNTcxOTkxNjcxfQ.nb15J6Z78zqs95PWSB2EJihCQlQowwrwK2Z0HLTs8_4')
    this.getUserInfo();
  },
  mounted() {
    window.scrollTo({ 
      top: 0, 
      left: 0, 
      behavior: "smooth" //平滑滚动
    })
  },
  watch: {
    $route(to, from) {
      this.getUserInfo();
    }
  },
  methods: {
    jumpView(viewName) { //页面跳转
      this.$router.push({name: viewName});
    },
    jumpBalance() {
      this.$router.push({
        name: 'accountBalance',
        query: {
          accountMoney: this.accountMoney
        }
      })
    },
    getUserInfo() { //获取用户信息
      if(this.$tool.userLoginFlag()){
        this.loginFlag = true;
        this.$api.get('/api/user/detail')
          .then((res) => {
            this.getMsgNum();
            this.headPic = res.data.headPic;
            this.nickName = res.data.nickName;
            let accountMoneyArr = res.data.accountMoney.toString().split('.');
            if(accountMoneyArr.length == 1) {
              this.accountMoney = res.data.accountMoney + '.00'
            }else {
              if(accountMoneyArr[1].length == 1) {
                this.accountMoney = res.data.accountMoney + '0'
              }else{
                this.accountMoney = res.data.accountMoney
              }
            }
            // this.accountMoney = res.data.accountMoney.toFixed(2);
            this.userName = res.data.userName;
            this.bankCard = res.data.cardNumber;
            this.phone = res.data.phone.substr(0, 3) + '****' + res.data.phone.substr(7);
            this.$store.commit("setUserInfo", res.data);
          })
      }else{
        this.loginFlag = false;
      }
    },
    getMsgNum() {
      this.$api.get('/api/imm/getMessageNum?noLoading')
        .then((res) => {
          this.msgNum = res.data.personalNumber + res.data.announcementNumber;
        })
    },
    withdrawFn() { //提现
      if(!this.userName){
        this.jumpView('certification')
        return;
      }
      if(!this.bankCard) {
        this.jumpView('bindBankCard')
        return;
      }
      this.jumpView('withdraw')
    }
  }
}
</script>

<style lang="scss" scoped>
  .my-container {
    .header-container {
      width: 100%;
      margin-bottom: 10px;
      background-color: #fff;
      .header-top-no-login {
        position: relative;
        width: 100%;
        height: 130px;
        padding: 32px 16px 0;
        box-sizing: border-box;
        display: flex;
        background: url(https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20190929/15697232753708624.png) no-repeat center;
        background-size: cover;
        .login-btn {
          width: 120px;
          height: 40px;
          line-height: 40px;
          margin: 24px auto 0;
          background-color: transparent;
          border: 1px solid #fff;
          color: #fff;
          font-size: 16px;
        }
        .message-info {
          position: absolute;
          top: 20px;
          right: 23px;
          width: 26px;
          height: 26px;
          img {
            width: 22px;
            height: 25px;
          }
          .message-tag {
            position: absolute;
            top: -4px;
            left: 14px;
            display: block;
            min-width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            font-size: 10px;
            border-radius: 16px;
            background-color: #F6344C;
            color: #fff;
          }
        }
      }
      .header-top {
        position: relative;
        width: 100%;
        height: 130px;
        padding: 32px 16px 0;
        box-sizing: border-box;
        display: flex;
        background: url(https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20190929/15697232753708624.png) no-repeat center;
        background-size: cover;
        .user-img {
          width: 49px;
          height: 49px;
          border-radius: 50%;
          overflow: hidden;
          background-color: #f8f8f8;
          img {
            width: 49px;
            height: 49px;
            object-fit: cover;
          }
        }
        .user-info {
          height: 49px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 16px;
          .user-info-name {
            display: flex;
            align-items: center;
            color: #fff;
            span {
              display: block;
              max-width: 160px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-right: 30px;
              font-size: 16px;
            }
            .arrow-right {
              color: #fff;
            }
          }
          .user-phone {
            width: 98px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            border-radius: 100em;
            background-color: #2CB084;
            color: #fff;
          }
        }
        .message-info {
          position: absolute;
          top: 20px;
          right: 23px;
          width: 26px;
          height: 26px;
          img {
            width: 22px;
            height: 25px;
          }
          .message-tag {
            position: absolute;
            top: -4px;
            left: 14px;
            display: block;
            min-width: 16px;
            height: 16px;
            line-height: 16px;
            padding: 0 4px;
            box-sizing: border-box;
            text-align: center;
            font-size: 10px;
            border-radius: 16px;
            background-color: #F6344C;
            color: #fff;
          }
        }
      }
      .header-bottom {
        width: 100%;
        padding: 24px 16px 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header-bottom-left {
          display: flex;
          align-items: center;
          .user-account {
            margin-right: 20px;
            p:first-child {
              margin-bottom: 10px;
              font-size: 22px;
              color: #344047;
            }
          }
        }
        .withdraw-btn {
          width: 76px;
          height: 34px;
          line-height: 34px;
          background:linear-gradient(94deg,rgba(49,188,141,1) 0%,rgba(166,226,155,1) 100%);
          color: #fff;
          border: none;
        }
      }
    }
    .center-container {
      width: 100%;
      padding: 18px 0;
      box-sizing: border-box;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #fff;
      li {
        text-align: center;
        img {
          width: 24px;
          height: 24px;
          margin-bottom: 6px;
        }
        p {
          color: #5D6164;
          font-size: 12px;
        }
      }
    }
    .bottom-container {
      width: 100%;
      background-color: #fff;
      li {
        width: 100%;
        padding: 10px 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f8f8f8;
        :last-child {
          border-bottom: none;
        }
        .bottom-list-left {
          display: flex;
          align-items: center;
          img {
            width: 30px;
            height: 30px;
            margin-right: 11px;
          }
          span {
            font-size: 16px;
            color: #5D6164;
          }
        }
      }
    }

    .empty-bottom-div {
      width: 100%;
      height: 20px;
    }
  }
</style>